<template>
  <div class="swiper-box">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item v-for="item in bannerimg" :key="item.id">
        <img :src="item.img1" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script lang="ts" setup>
import { getBannerImg } from "@/api/home";
import { ref } from "vue";
let bannerimg: any = ref("");
getBannerImg().then((res) => {
  if (res) {
    bannerimg.value = res;
  }
});
</script>
<style  scoped>
.swiper-box {
  width: 100%;
  height: 150px;
  margin-top: -100px;
}
.my-swipe {
  height: 198px;
  width: 95%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.456);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 20px;
}
img {
  width: 100%;
  height: 100%;
}
:deep(.van-swipe__track) {
  width: 100%;
}
:deep(.van-swipe-item) {
  width: 100%;
}
</style>